<template>
    <div>
        <el-table v-if="activeName == '人力需求'" :data="dealList" border>
            <el-table-column
            align="center"
                  fixed="left"
                  prop="name"
                  label="对应部门"
                  width="100">
                </el-table-column>
                  <el-table-column :label="`第2月预测人力需求`" align="center">
                    <el-table-column prop="_1forecastedGrossProduct" label="预测总产值" align="center" width="130"></el-table-column>
                    <el-table-column prop="_1monthlyManpower" label="月初人力" align="center"></el-table-column>
                    <el-table-column prop="_1medioManpower" label="月中人力" align="center"></el-table-column>
                    <el-table-column prop="_1endOfMonthManpower" label="月尾人力" align="center"></el-table-column>
                    <el-table-column prop="_1comprehensiveManpower" label="综合人力" align="center"></el-table-column>
                    <el-table-column prop="_1userList" label="当前实际人力" align="center"></el-table-column>
                    <el-table-column prop="_1manpowerIncreaseAndDecrease" label="人力增减" align="center"></el-table-column>
                  </el-table-column>
                  <el-table-column :label="`第3月预测人力需求`" align="center">
                    <el-table-column prop="_2forecastedGrossProduct" label="预测总产值" align="center" width="130"></el-table-column>
                    <el-table-column prop="_2monthlyManpower" label="月初人力" align="center"></el-table-column>
                    <el-table-column prop="_2medioManpower" label="月中人力" align="center"></el-table-column>
                    <el-table-column prop="_2endOfMonthManpower" label="月尾人力" align="center"></el-table-column>
                    <el-table-column prop="_2comprehensiveManpower" label="综合人力" align="center"></el-table-column>
                    <el-table-column prop="_2userList" label="当前实际人力" align="center"></el-table-column>
                    <el-table-column prop="_2manpowerIncreaseAndDecrease" label="人力增减" align="center"></el-table-column>
                  </el-table-column>
                  <el-table-column :label="`第4月预测人力需求`" align="center">
                    <el-table-column prop="_3forecastedGrossProduct" label="预测总产值" align="center" width="130"></el-table-column>
                    <el-table-column prop="_3monthlyManpower" label="月初人力" align="center"></el-table-column>
                    <el-table-column prop="_3medioManpower" label="月中人力" align="center"></el-table-column>
                    <el-table-column prop="_3endOfMonthManpower" label="月尾人力" align="center"></el-table-column>
                    <el-table-column prop="_3comprehensiveManpower" label="综合人力" align="center"></el-table-column>
                    <el-table-column prop="_3userList" label="当前实际人力" align="center"></el-table-column>
                    <el-table-column prop="_3manpowerIncreaseAndDecrease" label="人力增减" align="center"></el-table-column>
                  </el-table-column>
        </el-table>
        <el-table v-else :data="dealList" v-loading="listLoading" element-loading-text="拼命加载中"  stripe border fit highlight-current-row style="width: 100%">
            <div v-if="activeName == '第2月预测' || activeName == '第3月预测' || activeName == '第4月预测' || activeName == '历史预测'">
                <el-table-column fixed="left" label="序号" type="index" align="center" width="80px">
                    <template slot-scope="scope">
                        {{ (listQuery.page - 1) * listQuery.limit + scope.$index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column  label="预测月份" prop="orderForecastingForecastMonth" align="center"/>
                <el-table-column  label="客户名称" prop="orderForecastingCustomerName" align="center"/>
                <el-table-column  label="产品类型" prop="orderForecastingProductType" align="center"/>
                <el-table-column  label="客户编码" prop="orderForecastingCustomerNumber" align="center"/>
                <el-table-column  label="预测台数" prop="orderForecastingPredictNumber" align="center"/>
                <el-table-column  label="单台金额" prop="orderForecastingSingleAmount" align="center"/>
                <el-table-column  label="客户需求时间" prop="orderForecastingCustomerDemandTime" align="center"/>
                <el-table-column  label="上线加工时间" prop="orderForecastingProcessingTime" align="center"/>
                <el-table-column  label="加工台数" prop="orderForecastingNumberOfMachines" align="center"/>
                <el-table-column  label="总金额(万)" prop="orderForecastingAggregateAmount" align="center"/>
                <el-table-column  label="外发台数" prop="orderForecastingOutsourceNumber" align="center"/>
                <el-table-column  label="外发占比" align="center">
                  <template slot-scope="scope" >
                    {{ scope.row.orderForecastingOutsourceProportion ? parseFloat(scope.row.orderForecastingOutsourceProportion).toFixed(2) * 100 + '%':'' }}
                  </template>
                </el-table-column>
                <el-table-column  label="数控加工占比" prop="orderForecastingNumericalControlProportion" align="center"/>
                <el-table-column  label="焊接加工占比" prop="orderForecastingWeldingProportion" align="center"/>
                <el-table-column  label="喷涂加工占比" prop="orderForecastingSprayProportion" align="center"/>
                <el-table-column  label="装配日产能" prop="orderForecastingDailyAssemblyCapacity" align="center"/>
                <el-table-column  label="装配上线时间" prop="orderForecastingAssemblyLeadTime" align="center"/>
                <el-table-column  label="修改人员" prop="orderForecastingUpdateUserName" align="center"/>
                <el-table-column  label="修改时间" prop="orderForecastingUpdateTime" align="center"/>
                <!-- 修改与删除 -->
                <el-table-column fixed="right" label="操作" align="center" width="230">
                    <template slot-scope="scope" v-if="userInfo.roleId == 8 || userInfo.roleId == 9 || userInfo.roleId == 12 || userInfo.roleId == 14 || userInfo.roleId == 16 || userInfo.roleId == 29 || userInfo.roleId == 46 || userInfo.roleId == 42">
                        <el-button v-if="activeName !== '历史预测'" size="mini" type="success" @click="handleEdit(scope.row)">填写</el-button>
                        <el-button v-if="activeName !== '历史预测'" size="mini" type="primary" @click="Edit(scope.row)">修改</el-button>
                        <el-button v-if="userInfo.roleId == 14" size="mini" type="danger" @click="handleDelete(scope.$index,scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </div>
            <div v-if="activeName == '预测准确率'">
                <el-table-column fixed="left" label="序号" type="index" align="center" width="80px">
                    <template slot-scope="scope">
                        {{ (listQuery.page - 1) * listQuery.limit + scope.$index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column  label="预测月份" prop="orderForecastingForecastMonth" align="center"/>
                <el-table-column  label="客户名称" prop="orderForecastingCustomerName" align="center"/>
                <el-table-column  label="产品类型" prop="orderForecastingProductType" align="center"/>
                <el-table-column  label="客户编码" prop="orderForecastingCustomerNumber" align="center"/>
                <el-table-column  label="预测台数" prop="orderForecastingPredictNumber" align="center"/>
                <el-table-column  label="单台金额" prop="orderForecastingSingleAmount" align="center"/>
                <el-table-column  label="客户需求时间" prop="orderForecastingCustomerDemandTime" align="center"/>
                <el-table-column  label="预测金额(万)" prop="forecastedAmount" align="center"/>
                <el-table-column  label="排产台数" prop="planNumber" align="center"/>
                <el-table-column  label="排产金额(万)" prop="schedulingAmount" align="center"/>
                <el-table-column  label="预测准确率" prop="forecastAccuracy" align="center" :formatter="formatter">
                  <!-- <template slot-scope="scope">
                    {{ scope.row.forecastAccuracy? parseFloat(scope.row.forecastAccuracy).toFixed(2) * 100 + '%' : ''}}
                  </template> -->
                </el-table-column>
            </div>
            <div v-if="activeName == '人力需求'">
                <!-- <el-table-column fixed="left" label="序号" type="index" align="center" width="80px">
                    <template slot-scope="scope">
                        {{ (listQuery.page - 1) * listQuery.limit + scope.$index + 1 }}
                    </template>
                </el-table-column> -->
                <!-- <el-table-column  label="修改时间" prop="orderForecastingUpdateTime" align="center"/> -->
                <!-- <el-table-column
                  fixed="left"
                  prop="name"
                  label="对应部门"
                  width="150">
                </el-table-column>
                  <el-table-column :label="`第2月预测人力需求`" align="center">
                    <el-table-column prop="sk_comprehensiveManpower" label="预测总产值" align="center" width="130"></el-table-column>
                    <el-table-column prop="sk_monthlyManpower" label="月初人力" align="center"></el-table-column>
                    <el-table-column prop="sk_medioManpower" label="月中人力" align="center"></el-table-column>
                    <el-table-column prop="sk_endOfMonthManpower" label="月尾人力" align="center"></el-table-column>
                    <el-table-column prop="sk_comprehensiveManpower" label="综合人力" align="center"></el-table-column>
                    <el-table-column prop="sk_userList" label="当前实际人力" align="center"></el-table-column>
                    <el-table-column prop="sk_manpowerIncreaseAndDecrease" label="人力增减" align="center"></el-table-column>
                  </el-table-column> -->
            </div>
        </el-table>
        <el-dialog
          title="填写"
          :visible.sync="show"
          width="35%"
        >
          <el-form ref="form" :rules="rules"  :model="form">
            <el-form-item prop="orderForecastingProcessingTime" label="上线加工时间" label-width="120px">
              <el-date-picker
                style="width:400px" 
                  v-model="form.orderForecastingProcessingTime"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item prop="orderForecastingNumberOfMachines" label-width="120px" label="加工台数">
              <el-input v-model.number="form.orderForecastingNumberOfMachines" style="width:400px" />
            </el-form-item>
            <el-form-item prop="orderForecastingOutsourceNumber" label-width="120px" label="外发台数">
                <el-input v-model.number="form.orderForecastingOutsourceNumber" style="width:400px" />
            </el-form-item>
            <el-form-item prop="orderForecastingAssemblyLeadTime" label-width="120px" label="装配上线时间">
                <el-date-picker
                style="width:400px" 
                v-model="form.orderForecastingAssemblyLeadTime"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期">
            </el-date-picker>
        </el-form-item>
        <!-- <el-form-item prop="orderForecastingOutsourceProportion" label-width="120px" label="外发占比">
          <el-input disabled v-model="form.orderForecastingOutsourceProportion" style="width:400px" />
        </el-form-item> -->
            <el-form-item prop="orderForecastingNumericalControlProportion" label-width="120px" label="数控加工占比">
                <el-input :disabled="true" v-model="form.orderForecastingNumericalControlProportion" style="width:400px" />
            </el-form-item>
            <el-form-item prop="orderForecastingWeldingProportion" label-width="120px" label="焊接加工占比">
              <el-input :disabled="true" v-model="form.orderForecastingWeldingProportion" style="width:400px" />
            </el-form-item>
            <el-form-item prop="orderForecastingSprayProportion" label-width="120px" label="喷涂加工占比">
                <el-input :disabled="true" v-model="form.orderForecastingSprayProportion" style="width:400px" />
            </el-form-item>
            <el-form-item prop="orderForecastingDailyAssemblyCapacity" label-width="120px" label="装配日产能">
                <el-input :disabled="true" v-model="form.orderForecastingDailyAssemblyCapacity" style="width:400px" />
            </el-form-item>
            <el-form-item prop="orderForecastingAggregateAmount" label-width="120px" label="总金额（万）">
              <el-input :disabled="true" v-model="form.orderForecastingAggregateAmount" style="width:400px" />
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="show = false">取 消</el-button>
            <el-button type="primary" @click="submit">确 定</el-button>
          </span>
        </el-dialog>
    </div>
</template>

<script>
import { ForecastingDel,orderForecasting,ForecastingUpd } from '../../../api/planManagement.js'
export default {
    props:{
        activeName: {
          type: String,
          required: true
        },
        dealList: {
          type: Array,
          required: true
        },
    },
    data(){
        return{
            show: false,
            listLoading:false,
            listQuery: {
              page: 1,
              limit: 10,
              isDelete: 0,
              orderForecastingForecastMonth: '2024-04'
          },
          userInfo: this.$store.state.user.userInfo,
          form:{
            orderForecastingProcessingTime:'',
            orderForecastingNumberOfMachines:'',
            orderForecastingAggregateAmount:'',
            orderForecastingOutsourceNumber:'',
            orderForecastingOutsourceProportion:'',
            orderForecastingNumericalControlProportion:'',
            orderForecastingWeldingProportion:'',
            orderForecastingSprayProportion:'',
            orderForecastingDailyAssemblyCapacity:'',
            orderForecastingAssemblyLeadTime:'',
          },
          rules: {
            orderForecastingProcessingTime: [
                  { required: true, message: '请输入上线加工时间', trigger: 'blur' }
                ],
            orderForecastingNumberOfMachines: [
                  { required: true, message: '请输入加工台数', trigger: 'blur' }
                ],
                orderForecastingAggregateAmount: [
                { required: true, message: '请输入总金额（万）', trigger: 'blur' }
              ],
              orderForecastingOutsourceNumber: [
                { required: true, message: '请输入外发台数', trigger: 'blur' }
              ],
              orderForecastingOutsourceProportion: [
                { required: true, message: '请选择外发占比', trigger: 'blur' }
              ],
              orderForecastingNumericalControlProportion: [
                { required: true, message: '请输入数控占比', trigger: 'blur' }
              ],
              orderForecastingWeldingProportion: [
                { required: true, message: '请输入焊接占比', trigger: 'blur' }
              ],
              orderForecastingSprayProportion: [
                { required: true, message: '请输入喷涂占比', trigger: 'blur' }
              ],
              orderForecastingDailyAssemblyCapacity: [
                { required: true, message: '请输入装配日产能', trigger: 'blur' }
              ],
              orderForecastingAssemblyLeadTime: [
                { required: true, message: '请输入装配上线时间', trigger: 'blur' }
              ]
            },
        }
    },
    methods:{
      formatter(row, column, value, index){
        return value? parseFloat(value).toFixed(2) * 100 + '%' : ''
      },
        Edit(data){
            this.$emit('Edit',data)
        },
        // 重置表单
        closeReset(){
          this.modifyform = {
            orderForecastingProcessingTime:'',
            orderForecastingNumberOfMachines:'',
            orderForecastingAggregateAmount:'',
            orderForecastingOutsourceNumber:'',
            orderForecastingOutsourceProportion:'',
            orderForecastingNumericalControlProportion:'',
            orderForecastingWeldingProportion:'',
            orderForecastingSprayProportion:'',
            orderForecastingDailyAssemblyCapacity:'',
            orderForecastingAssemblyLeadTime:'',
          }
          this.$refs.formName.resetFields()
          this.dialogFormVisible = false
        },
        async submit(){
            await this.$refs.form.validate()
            if(parseFloat(this.form.orderForecastingNumberOfMachines) > parseFloat(this.form.orderForecastingPredictNumber)) return this.$message.error('加工台数不能大于预测台数！');
            let query = Object.assign({},this.form)
            // 外发占比
            query.orderForecastingOutsourceProportion =  query.orderForecastingOutsourceNumber / query.orderForecastingNumberOfMachines  
            if(this.userInfo.roleId == 14){
              query.bool = true
            } else {
              query.bool = false
            }
            const data = await ForecastingUpd(query)
            if(data.code == '1'){
              this.$message({
                message: '填写成功',
                type: 'success'
              })
              this.show = false
              this.$emit('getData')
            } else {
              this.$message({
                message: `${data.msg}`,
                type: 'error'
              })
            }
        },
    async handleEdit(data){
        this.show = true
        this.form = JSON.parse(JSON.stringify(data));
        // console.log(this.form);
        // console.log(data.orderForecastingSingleAmount);
        this.form.orderForecastingAggregateAmount = (data.orderForecastingNumberOfMachines * data.orderForecastingSingleAmount / 10000).toFixed(1)
        const res = await orderForecasting({
            attributeMaintenanceCustomerName:this.form.orderForecastingCustomerName,
            attributeMaintenanceProductType:this.form.orderForecastingProductType,
            page: 1,
            limit: 10,
            isDelete: 0})
            this.form.orderForecastingNumericalControlProportion = res.data.list[0].attributeMaintenanceNumericalControlProportion
            this.form.orderForecastingWeldingProportion = res.data.list[0].attributeMaintenanceWeldProportion
            this.form.orderForecastingSprayProportion = res.data.list[0].attributeMaintenanceSprayProportion
            this.form.orderForecastingDailyAssemblyCapacity = res.data.list[0].attributeMaintenanceAssembleProportion
    },
    // 删除
    handleDelete(index,data){
        this.$confirm('这将会永久删除该行数据，是否继续?', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
      }).then(async () => {
        let bool = ''
        if(this.userInfo.roleId == 14){
          bool = true
        } else {
          bool = false
        }
        let res = await ForecastingDel({id: data.id,isDelete: 1,bool})
        console.log(res)
        if(res.code == 1){
          this.$message({
            type: 'success',
            message: '删除成功'
          })
          this.$emit('getData')
        } else {
          this.$message({
            type: 'error',
            message: `${res.msg}`
          })
        }
      }).catch(() => {
        this.$message({
          type: 'info', 
          message: '已取消删除'
        })
      })
    },
    },
  // 在生命周期函数调用"搜索"按钮绑定的函数，显示已有的数据
 mounted() {
    console.log(this.dealList);
      },
}
</script>

<style>

</style>